vue
复制代码
<template>  
  <div class="login-container">  
    <form @submit.prevent="handleSubmit">  
      <div class="form-group">  
        <label for="username">用户名</label>  
        <input v-model="username" type="text" id="username" placeholder="用户名" required autocomplete="username" class="form-control">  
      </div>  
      <div class="form-group">  
        <label for="password">密码</label>  
        <input v-model="password" type="password" id="password" placeholder="密码" required autocomplete="current-password" class="form-control">  
      </div>  
      <button type="submit" class="btn btn-primary">登录</button>  
    </form>  
  </div>  
</template>  
  
  <script>      
  import { ref } from 'vue';
  import { useAuthStore } from '@/stores/auth';
  import { useRouter } from 'vue-router';
  import mockLogin from '@/api/mockLogin'; 
  
  export default {      
    setup() {    
      const router = useRouter();
      const username = ref('00');
      const password = ref('123456');
      const authStore = useAuthStore();
  
      const handleSubmit = async () => {
        try {
          const response = await mockLogin(username.value, password.value); // 调用模拟的登录API
          if (response.success) {
            authStore.login(response.user);
            router.push('/'); 
          } else {
            alert('登录失败，请检查用户名和密码。');
          }
        } catch (error) {
          alert('登录过程中发生错误：' + error.message);
        }
      };
  
      return {
        username,
        password,
        handleSubmit,
      };
    },
  };
  </script>
 <style scoped>  
 .login-container {  
   max-width: 400px;  
   padding: 20px;  
   background-color: #f9f9f9;  
   border-radius: 5px;  
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
   margin: 0 auto;  
   margin-top: 100px;  
 }  
   
 .form-group {  
   margin-bottom: 20px;  
 }  
   
 .form-group label {  
   display: block;  
   margin-bottom: 5px;  
 }  
   
 .form-control {  
   width: 100%;  
   padding: 10px;  
   border-radius: 4px;  
   border: 1px solid #ccc;  
   font-size: 16px;  
 }  
 .form-control{
width: 80%;
 }  
 .btn {  
   display: inline-block;  
   padding: 10px 20px;  
   font-size: 16px;  
   text-align: center;  
   white-space: nowrap;  
   vertical-align: middle;  
   border: none;  
   border-radius: 4px;  
   cursor: pointer;  
 }  
   
 .btn-primary {  
   background-color: #007bff;  
   color: white;  
 }  
   
 .btn-primary:hover {  
   background-color: #0056b3;  
 }  
 </style> 